<template>
  <a-form :form="dataForm" >
    <a-form-item v-bind="formItemLayout" label="真实姓名:">
      <a-input
          v-decorator="[
          'realName',
          {
            rules: [
              {
                required: true,
                message: '真实姓名不能为空',
              },
              { min: 1, message: '真实姓名至少1位' },
              { max: 32, message: '真实姓名最多32位' }
            ],
          },
        ]"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="用户名称:">
      <a-input
          v-decorator="[
          'userName',
          {
            rules: [
              {
                required: true,
                message: '用户名称不能为空',
              },
              { min: 1, message: '用户名称至少1位' },
              { max: 32, message: '用户名称最多32位' }
            ],
          },
        ]"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="登录密码:">
      <a-input
          v-decorator="[
          'password',
          {
            rules: [
              {
                required: true,
                message: '登录密码不能为空',
              },
              { min: 6, message: '登录密码至少6位' },
              { max: 64, message: '登录密码最多64位' }
            ],
          },
        ]"
        type="password"
      />
    </a-form-item>
    <a-form-item v-bind="tailFormItemLayout">
      <a-button type="primary" @click="submit">
        注册
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import * as request from '@/axios/request'
export default {
  name: "register",
  data(){
    return{
      dataForm:this.$form.createForm(this, {
        realName: '',
        userName: '',
        password:''
      }),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      }
    }
  },
  mounted() {
  },
  methods:{
    submit(){
      console.log(this.dataForm)
      let realName =  this.dataForm.getFieldValue("realName")
      let password = this.dataForm.getFieldValue("password")
      let userName =  this.dataForm.getFieldValue("userName")

      request.post("api/nuoUser/saveUser",{
        realName:realName,
        password:password,
        userName:userName
      }).then(res=>{
        console.log(res)
      })

    }
  }
}
</script>

<style scoped>

</style>